<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>校园帮帮</title>
    <link th:href="@{/asserts/style/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/asserts/style/index.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/asserts/js/public.js}"></script>
    <script type="text/javascript" th:src="@{asserts/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{asserts/js/jqpublic.js}"></script>

    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery-3.5.1.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<header>
    <section class="Topmenubg">
        <div class="Topnav">
            <div class="LeftNav" th:unless="${session.userInfo}">
                <a th:href="@{/register.html}">注册</a>/<a th:href="@{/login.html}">登录</a>
            </div>
            <div class="LeftNav" th:if="${session.userInfo}">
                <img style="width: 40px; height: 40px; border-radius: 50%;" th:src="|${application.imgPath}${session.userInfo.avatar}|" alt="avatar">
            </div>
            <div class="LeftNav" th:if="${session.userInfo}">
                <span th:text="${session.userInfo.nickname}"></span>&nbsp;&nbsp;
                <a th:href="@{/logout}">退出登录</a>
            </div>
            <div class="RightNav">
                <a th:href="@{/user_center.html}">用户中心</a> <a th:href="@{/user_orderlist.html}" target="_blank" title="我的订单">我的订单</a> <a href="#">成为骑手</a>
            </div>
        </div>
    </section>
    <div class="Logo_search">
        <div class="Logo">
            <img th:src="@{/asserts/images/logo.jpg}" title="校园帮帮" alt="">
        </div>
    </div>
    </div>
    <nav class="menu_bg">
        <ul class="menu">
            <li><a th:href="@{/index.html}">首页</a></li>
            <li><a th:href="@{/list.html}">二手商城</a></li>
            <li><a th:href="@{/run_release.html}">校园代取</a></li>
            <li><a th:href="@{/about_us.html}">关于我们</a></li>
        </ul>
    </nav>
</header>
<!--Start content-->
<section class="Psection MT20">
    <nav class="U-nav Font14 FontW">
        <ul>
            <li><i></i><a href="/user_center.html">用户中心首页</a></li>
            <li><i></i><a href="/user_secondorderrelease.html">发布的二手商品</a></li>
            <li><i></i><a href="/user_secondorderreceive.html">购买的二手交易订单</a></li>
            <li><i></i><a href="/user_runorderrelease.html">发布跑腿订单</a></li>
            <li><i></i><a href="/user_runorderreceive.html">跑腿接单订单</a></li>
            <li><i></i><a href="/user_address.html">收货地址</a></li>
            <li><i></i><a href="/user_account.html">密码修改</a></li>
        </ul>
    </nav>
    <div id="myApp">
        <article class="U-article Overflow">
            <!--user order list-->
            <section>
                <span class="AMTitle Block Font14 FontW Lineheight35">发布跑腿订单：</span>
                <form action="">
                    <input type="hidden" name="id" th:value="${session.userInfo.id}">
                    <table class="Myorder table table-bordered">
                        <th class="Font14 FontW">订单编号</th>
                        <th class="Font14 FontW">发布者ID</th>
                        <th class="Font14 FontW">商品描述</th>
                        <th class="Font14 FontW">取货地址</th>
                        <th class="Font14 FontW">送货地址</th>
                        <th class="Font14 FontW">佣金</th>
                        <th class="Font14 FontW">订单创建时间</th>
                        <th class="Font14 FontW">订单完成时间</th>
                        <th class="Font14 FontW">订单状态</th>
                        <th class="Font14 FontW">操作</th>
                        <tr v-for="release in runReleaseList">
                            <td class="FontW" v-text="release.id">201409225367</td>
                            <td v-text="release.userid"></td>
                            <td v-text="release.description">好东西</td>
                            <td v-text="release.pickupaddress">门口</td>
                            <td v-text="release.deliveryaddress">后门</td>
                            <td v-text="release.commission">￥8.00</td>
                            <td v-text="release.createtime">20201212</td>
                            <td v-text="release.endtime">20201212</td>
                            <td v-text="release.status==0?'已取消':(release.status==1?'待接单':(release.status==2?'已接单':'已完成'))">
                                完成
                            </td>
                            <!--                            <td><a href="javascript:;"-->
                            <!--                                   v-on:click="reduce(release.id)">取消订单</a> | <a href="#">付款</a></td>-->

                            <td><a v-if=" [1].includes(release.status)" href="javascript:;"
                                   v-on:click="updateStatus(release.id)">取消订单</a>
                                <a href="" v-if="release.status==0" style="pointer-events: none;">已取消</a>
                                <a v-if="release.status==2" href="javascript:;">付款</a>
                                <a v-if="release.status==3" href="javascript:;"
                                   @click="open(release.id,release.userid)">投诉</a>
                            </td>
                        </tr>
                    </table>
                    <div class="TurnPage">
                        当前页 {{pageNum}}/{{pages}}页 &nbsp;&nbsp;总计:{{total}}条 &nbsp;&nbsp;
                        <a @click="go(1)" title="">首页</a>
                        <a id="backpage" class="undisable" @click="go(prePage)"
                           title="">上一页</a>
                        <a id="nextpage" href="javascript:void(0)" @click="go(nextPage)"
                           title="">下一页</a>
                        <a @click="go(pages)" title="">末页</a>

                        <div class="clear"></div>
                    </div>
                </form>
            </section>
        </article>

        <!--投诉-->
        <el-dialog title="投  诉" :visible.sync="complaintDialogVisible" width="50%"
                   :close-on-click-modal="false">
            <el-form
                    :model="complaintForm"
                    ref="complaintFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="投诉内容" prop="content">
                    <el-input v-model="complaintForm.content"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" prop="orderid">
                    <el-input v-model="complaintForm.orderid"></el-input>
                </el-form-item>
                <el-form-item label="投诉人ID" prop="complainantid">
                    <el-input v-model="complaintForm.complainantid"></el-input>
                </el-form-item>
                <el-form-item label="图片上传">
                    <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            name="complaintsimg">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <span class="dialog-footer">
        <el-button type="primary" @click="addComplaint">确认评价</el-button>
                    <!--                    {{complaintForm}}-->
      </span>
            </el-form>
        </el-dialog>
    </div>
</section>
<!--End content-->
<div class="F-link">
    <span>友情链接：</span>
</div>
<footer>
    <section class="Otherlink">
        <aside>
            <div class="ewm-left">
                <p>手机扫描二维码：</p>
                <img th:src="@{/asserts/images/Android_ico_d.gif}">
                <img th:src="@{/asserts/images/iphone_ico_d.gif}">
            </div>
            <div class="tips">
                <p>客服热线</p>
                <p><i>18612341234</i></p>
                <p>网站公告</p>
            </div>
        </aside>
        <section>
            <div>
                <span><i class="i1"></i>配送支付</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i2"></i>关于我们</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i3"></i>帮助中心</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                </ul>
            </div>
        </section>
    </section>
    <div class="copyright">© 版权所有 2020</div>
</footer>
</body>

<script>
    let app = new Vue({
        el: "#myApp",
        data: {
            imgPath: '',
            imageUrl: '',
            uploadUrl: '',
            complaintDialogVisible: false,
            complaintForm: {
                id: -1,
                content: '',
                orderid: -1,
                complainantid: -1,
                complaintsimg: '',
            },
            runReleaseList: [],
            userid: [[${session.userInfo.id}]],
            pageNum: 1,
            pageSize: 4,
            prePage: 0,
            nextPage: 0,
            pages: 0,
            total: 0,
        },
        methods: {
            addComplaint() {
                let url = "/runComplaint/complaint"
                axios.post(url, {
                    content: this.complaintForm.content,
                    orderid: this.complaintForm.orderid,
                    complainantid: this.complaintForm.complainantid,
                    complaintsimg: this.complaintForm.complaintsimg,
                }).then(res => {
                    this.complaintForm.id = -1
                    this.complaintForm.content = ''
                    this.complaintForm.orderid = -1
                    this.complaintForm.complainantid = -1
                    this.complaintForm.complaintsimg = ''
                    this.complaintDialogVisible = false;
                    // this.complaintForm = {}
                    this.initListData();
                })
            },
            //上传成功之后的回调
            handleAvatarSuccess(res, file) {
                console.log(res, file)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.complaintForm.complaintsimg = res.filename
            },
            //上传之前拦截
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            open(id, userid) {
                // console.log(orderid)
                // console.log(goodid)
                // console.log(sellId)
                this.complaintForm.orderid = id;
                this.complaintForm.complainantid = userid;
                this.complaintDialogVisible = true;
            },
            updateStatus(id) {
                let url = "/RunOrder/updateStatus/" + id
                if (confirm("确认取消吗？")) {
                    axios.delete(url).then((res) => {
                        this.initListData();
                    })
                }
            },
            initListData() {
                let url = "/RunOrder/list"
                axios.get(url, {
                    params: {
                        now: this.pageNum,
                        size: this.pageSize,
                        userid: this.userid
                    }
                }).then(res => {
                    this.runReleaseList = res.data.list;
                    this.pageNum = res.data.pageNum;
                    this.pageSize = res.data.pageSize;
                    this.prePage = res.data.prePage;
                    this.nextPage = res.data.nextPage;
                    this.pages = res.data.pages
                    this.total = res.data.total
                })
            },
            go(num) {
                this.pageNum = num;
                this.initListData();
            },
        },
        created() {
            this.initListData()
            this.imageUrl = 'http://192.168.20.28:9998/imgs/'
            this.uploadUrl = "runComplaint/upload"
        }
    })
</script>
<style lang="less" scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

</html>
